<template>
  <div>
    <div class="applyInvoice">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">发票</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i style="color:#f60">开票设置</i>
            </label>
          </button>
        </div>
      </header>
      <mt-navbar class="page-part" v-model="selected">
        <mt-tab-item id="1">待索取订单</mt-tab-item>
        <mt-tab-item id="2">已申请发票</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="orderGoods">
            <div class="c-order" v-for="(item,index) in orderList" :key="index">
              <i class="iconfont" :class="[item.check ? 'icon-select' :'icon-select-default']" @click="checked(item,index)"></i>
              <div class="order-mid">
                <p>订单编号<span>{{item.orderCode}}</span><span style="float:right">{{item.orderPayDate|formatDate('yyyy-MM-dd')}}</span></p>
                <p>交易金额<span>￥{{item.orderPayPrice|formatMoney}}</span></p>
                <p>支付方式<span>{{item.payType|payType}}</span></p>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="invoiceList">
              <div class="invoiceIndex" v-for="(item,index) in invoiceInfoList" :key="index">
                <p v-if="item.issueType == 1">个人<span style="color:#F60;float:right">{{item.invoiceStatus|invoiceStatus}}</span></p>
                <p v-else>{{item.invoiceTitle}}<span style="color:#F60;float:right">{{item.invoiceStatus|invoiceStatus}}</span></p>
                <p>发票金额：<span style=" color: #a8a8a8;">¥{{item.invoicePrice|formatMoney}}</span></p>
                <p style=" color: #a8a8a8;margin-top:15px;">{{item.createDate|formatDate('yyyy-MM-dd')}}<span style="color: #a8a8a8;float:right" v-if="item.expressNumber">运单号：{{item.expressNumber}}</span></p>
              </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <div class="bot-info">
        <span @click="selectedAllGoods">
          <i class="iconfont" :class="[selectedAll ? 'icon-select' : 'icon-select-default']"></i>全选</span>
        <button @click="apply">索取发票</button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getAskingInvoice,
  invoiceInfoList
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      selected: '1',
      flag: false,
      check: false,
      selectedAll: false,
      orderList: [],
      invoiceInfoList: [],
      orderIds: '',
      invoicePrice: ''
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.fetchData()
  },
  filters: {
    payType(val) {
      return val === 0 ? '' : val === 1 ? '微信' : val === 2 ? '支付宝' : val === 3 ? '银联' : val === 4 ? '转账' : val === 5 ? '余额' : val === 6 ? '财付通' : '未知'
    },
    invoiceStatus(val) {
      return val === 0 ? '' : val === 1 ? '待开票' : val === 2 ? '已开票' : '未知'
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id,
        pageIndex: 1,
        pageSize: 20
      }
      getAskingInvoice(formData).then(res => {
        const list = []
        res.data.orderList.forEach(size => {
          list.push(size)
        })
        this.orderList = list
        this.orderList.forEach(size => {
          this.$set(size, 'check', false)
        })
      })
      invoiceInfoList(formData).then(res => {
        this.invoiceInfoList = res.data.invoiceInfoList
      })
    },
    checked(item, index) { // 选择商品
      item.check = !item.check
      let count = 0
      this.orderList.forEach(item => {
        if (item.check) return count++
      })
      if (count === this.orderList.length) {
        this.selectedAll = true
      } else {
        this.selectedAll = false
      }
      this.computedTotalFee()
    },
    selectedAllGoods() { // 选择所有
      this.orderList.forEach(store => {
        store.check = !this.selectedAll
      })
      this.selectedAll = !this.selectedAll
      this.computedTotalFee()
    },
    computedTotalFee() { // 合计
      let orderId = ''
      let computedFee = 0
      this.orderList.forEach(store => {
        if (store.check) {
          orderId = orderId + store.id + ','
          computedFee += store.goodsNum * parseFloat(store.goodsMoney)
        }
      })
      this.orderIds = orderId
      this.invoicePrice = computedFee
    },
    apply() {
      if (this.orderIds === '') {
        Toast('请选择索取发票的订单')
      } else {
        this.$router.replace({
          name: 'askInvoiceInfo',
          query: {
            orderIds: this.orderIds,
            invoicePrice: this.invoicePrice
          }
        })
      }
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.applyInvoice {
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 105px;
  background-color: #fff;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .title {
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    padding: 0 15px;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .orderGoods {
    padding-top: 35px;
    .c-order {
      padding: 10px 10px 10px 50px;
      background-color: rgb(252, 252, 252);
      overflow: hidden;
      margin-bottom: 3px;
      position: relative;
      i {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 15px;
      }
      .order-mid {
        position: relative;
        float: left;
        width: 100%;
        height: 100%; //   line-height: 25px;
        p {
          line-height: 25px;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        span {
          color: rgb(190, 190, 190);
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
  }
  .invoiceList{
      padding-left: 15px;
    .invoiceIndex{
      padding: 15px 15px 10px 0;
      border-bottom: 1px solid #d4dce1; 
      p{
        line-height: 25px;
      }
    }
  }
  .bot-info {
    height: 44px;
    width: 100%;
    color: #767676;
    text-align: right;
    line-height: 20px;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    box-shadow: 0px -2px 4px rgba(0,0,0,0.1);
    span {
      position: absolute;
      left: 15px;
      top: 50%;
      margin-top: -12.5px;
      color: #000;
      line-height: 21px;
      i {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    button{
       color: #FFF;
       background: #4a90e2;
       height: 44px;
       width: 110px;
       position: absolute;
       top: 0;
       right: 0;
    }
  }
}
</style>
